<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录- 图书管理系统</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="jQuery/css/htmleaf-demo.css">
    <link rel="stylesheet" href="jQuery/css/style.css"/>
    <style>
        #top-image {
            background: linear-gradient(
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2)
            ), url('jQuery/images/1.jpg') no-repeat fixed;
            position:fixed ;
            top:0;
            width:100%;
            z-index:0;
            height:100%;
        }

        html, body {
            font-size: 14px;
            width: 100%;
            height: 100%;
            color: #fff;
            text-shadow: 2px -1px 4px #000;
        }
        input{
            color: #fff!important;
        }
        input::-webkit-input-placeholder{
            color: #fff!important;
        }

        .login-layout {
            position: absolute;
            width: 500px;
            left: 50%;
            top: 50%;
            border-radius: .75rem;
            transform: translate(-50%, -50%);
            background: rgba(255,255,255, 0.06);
            padding: 100px 80px 80px 50px;
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;

        }

        .logo{
            font-size: 30px;
            width: 100%;
            text-align: center;
            margin-bottom: -10px;
        }


        .layui-input{
            background-color: rgba(255,255,255, 0.3);
            border: 0;
        }

        .layui-form{
            width: 400px!important;
        }
    </style>
</head>
<body>
<%@include file="alert.jsp"%>

<div id="top-image">
         <div class="login">
            <div class="login-layout">
                <form class="layui-form" method="post" action="/login">
                    <div class="layui-form-item">
                        <label class="layui-form-label logo" style="margin-top: -40px;margin-bottom: 20px;text-shadow: 3px -1px 3px #000;font-size: 30px">
                            图书馆
                        </label>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"
                               style="text-align: center">用户名
                        </label>
                        <div class="layui-input-block">
                            <input type="text" 	name="username"
                                   placeholder="请输入" value="123"
                                   autocomplete="off" class="layui-input" style="border-radius: .5rem;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="text-align:
                center">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password"
                                   placeholder="请输入" value="root"
                                   autocomplete="off" class="layui-input" style="border-radius: .5rem;">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">权限：</label>
                            <div class="layui-input-block" style="text-shadow: 0px 0px 4px #000;left: 30px">
                                <input type="radio" name="role" value="0"
                                       title="管理员">
                                <input type="radio" name="role" value="1"
                                       title="用户" checked>
                            </div>
                        </div>
                        <div class="layui1-input-block" style="position: absolute;left: 70px;bottom: 40px">
                            <button class="layui-btn layui-btn-radius" lay-submit
                                    lay-filter="*" style="width: 150px">登录
                            </button>
                            <a href="./register.jsp"><span
                                    class="layui-btn layui-btn-primary layui-btn-radius" style="position: relative;left:40px;text-shadow: none;width: 150px">用户注册</span></a>
                        </div>
                    </div>
                    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
                </form>
            </div>
         </div>
</div>


        <script src="layui/layui.js"></script>
        <script src="jQuery/js/jquery-1.11.0.min.js"></script>
        <script src="jQuery/js/ios-parallax.js"></script>


        <script>
            layui.use('form', function(){
                var form = layui.form;

                //各种基于事件的操作，下面会有进一步介绍
            });
        </script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#top-image').iosParallax({
                    movementFactor: 500,
                    dampenFactor: 100
                });
            });
        </script>
</body>
</html>